<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="card newstyle" style="padding-top: 20px; padding-bottom: 20px">
      <div class="row col-md-12">
        <div class="col-md-6">
          <div class="form-group row">
            <label class="col-md-2 padding-right col-form-label"
              >日期范围</label
            >
            <div class="col-md-10">
              <el-date-picker
                v-model="dateRange"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="row col-md-12">
        <div class="col-md-12">
          <div class="form-group row">
            <label class="col-md-1 padding-right col-form-label"
              >生成报告项</label
            >
            <div class="col-md-10">
              <el-checkbox-group v-model="checkList">
              <el-checkbox label="数据采集"></el-checkbox>
              <el-checkbox label="客户关系"></el-checkbox>
              <el-checkbox label="信源状态"></el-checkbox>
              <el-checkbox label="计算资源"></el-checkbox>
              <el-checkbox label="系统接口"></el-checkbox>
              <el-checkbox label="系统日志"></el-checkbox>
              <el-checkbox label="标签标记"></el-checkbox>
              <el-checkbox label="数据仓库"></el-checkbox>
              <el-checkbox label="用户">
                <el-input class="elinp" v-model="username" placeholder="同时发送邮件给，发送多个用户可以用逗号隔开。"></el-input>
              </el-checkbox>
            </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div class="row col-md-12" style="margin-left: 0px">
        <b-button
          variant="primary"
          @click="addReport"
          style="margin-right: 10px; padding: 0rem 0.75rem; height: 32px"
        >
          创建报告
        </b-button>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body pt-0" style="padding-top: 1.25rem !important;">
            <div class="allNum">
              <div class="searchNum">为您找到<span>5,000+</span>份历史系统报告</div>
            </div>
            <div class="table-responsive">
              <b-table
                class="table-centered"
                :items="ordersData"
                :fields="fields"
                responsive="sm"
                :per-page="perPage"
                :current-page="1"
                thead-class="thead-light"
                @filtered="onFiltered"
              >
                <template v-slot:cell(action)="row">
                  <span @click="toDetail(row.item)" class="pointer">查看报告</span>
                  <span style="margin:0 5px;">|</span>
                  <span class="pointer">发送报告</span>
                </template>
              </b-table>
            </div>
            <div class="row">
              <div class="col">
                <div class="dataTables_paginate paging_simple_numbers float-right">
                  <ul class="pagination pagination-rounded mb-0">
                    <!-- pagination -->
                    <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
export default {
  components: {
    Layout,
    PageHeaderNew,
  },
  data () {
    return {
      items: [
        {
          text: "系统首页",
          url: "/dashboard",
        },{
          text: "系统运行报告",
          url: "/",
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "24小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateRange: "",
      checkList: ['数据采集','客户关系','信源状态','计算资源','系统接口','系统日志','标签标记','数据仓库'],
      username: "",
      ordersData: [
        {
          date: "2022-02-01",
          cycle: "2天",
          buildProject: "全部",
          state: "创建成功",
          createTime: "5分钟前",
          consumingTime: "1.23m",
        },{
          date: "2022-02-02",
          cycle: "1天",
          buildProject: "4个",
          state: "正在生成",
          createTime: "2022-01-01",
          consumingTime: "0.58m",
        }
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      pageOptions: [10, 25, 50, 100],
      fields: [
        { key: "date", label: "报告日期" },
        { key: "cycle", label: "统计周期" },
        { key: "buildProject", label: "生成项目" },
        { key: "state", label: "报告状态" },
        { key: "createTime", label: "创建时间" },
        { key: "consumingTime", label: "计算耗时" },
        { key: "action", label: "操作" }
      ],
    }
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发更新");
      }
    }
  },
  methods: {
    addReport(){
      
    },
    onFiltered() {
      this.currentPage = 1;
    },
    toDetail(){
      this.$router.push('/dashboard/operationReportDetail')
    },
  }
}
</script>
<style lang="scss" scoped>
.padding-right {
  padding-right: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.el-input__inner {
  width: 100%;
  height: 1.7rem;
  padding: 0rem 0.75rem;
  line-height: 1.7rem;
  ::v-deep .el-input__icon,
  ::v-deep .el-range-separator {
    line-height: 1.7rem;
  }
}
.elinp{
  width: 320px;
  ::v-deep .el-input__inner{
    width: 100%;
    height: 1.7rem;
    padding: 0rem 0.75rem;
    line-height: 1.7rem;
  }
}
.newstyle {
  input,
  select {
    height: 1.7rem;
    padding: 0rem 0.75rem;
  }
}
.allNum{
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.searchNum{
  span{
    font-size: 1rem;
    color: #3444c1;
    margin: 0 4px;
    font-weight: 600;
  }
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #5664d2;
  border-color: #5664d2;
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
  color: #5664d2;
}
</style>
